﻿<!DOCTYPE html>
<html lang="en">
<#include "../include/resource-head.ftl"/>
<#assign active='configList'/>
<body>
<#include "../include/common-top.ftl"/>
<div class="main-container" id="main-container">
    <div class="main-container-inner">
    <#include "../include/common-menu.ftl"/>
        <div class="main-content">
            <div class="page-content">
                <div class="col-xs-12">
                    <div class="row-fluid">
                        <div class="widget-box">
                            <div class="widget-header widget-header-blue widget-header-flat">
                                <h4 class="lighter">
                                    <i class="icon-plus"></i>用户血压心率折线图
                                </h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="widget-main padding-4">
                                        <div id="sales-charts"></div>
                                    </div><!-- /widget-main -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row-fluid">
                        <div class="widget-box">
                            <div class="widget-header widget-header-blue widget-header-flat">
                                <h4 class="lighter">
                                    <i class="icon-plus"></i>用户血糖折线图
                                </h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="widget-main padding-4">
                                        <div id="sales-charts2"></div>
                                    </div><!-- /widget-main -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row-fluid">
                        <div class="widget-box">
                            <div class="widget-header widget-header-blue widget-header-flat">
                                <h4 class="lighter">
                                    <i class="icon-plus"></i>用户BMI折线图
                                </h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="widget-main padding-4">
                                        <div id="sales-charts3"></div>
                                    </div><!-- /widget-main -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row-fluid">
                        <div class="widget-box">
                            <div class="widget-header widget-header-blue widget-header-flat">
                                <h4 class="lighter">
                                    <i class="icon-plus"></i>用户视力折线图
                                </h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="widget-main padding-4">
                                        <div id="sales-charts4"></div>
                                    </div><!-- /widget-main -->
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div><!-- /.page-content -->
        </div><!-- /.main-content -->
    </div><!-- /.main-container -->
</body>
<#include "../include/resource-script.ftl"/>
<script src="/themes/plugins/flot/jquery.flot.min.js"></script>
<script src="/themes/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="/themes/plugins/flot/jquery.flot.resize.min.js"></script>
<script>

    var xyss = [];
    var xysz = [];
    var xl = [];
    var xt = [];
    var bmi = [];
    var slz = [];
    var sly = [];
    var arr = [];
    <#list infoList as item>
    xyss.push([${item?index}, ${item.xyss}]);
    xysz.push([${item?index}, ${item.xysz}]);
    xl.push([${item?index}, ${item.xl}]);
    xt.push([${item?index}, ${item.xt}]);
    bmi.push([${item?index}, ${item.bmi}]);
    slz.push([${item?index}, ${item.slz}]);
    sly.push([${item?index}, ${item.sly}]);
    arr.push([${item?index}, "${item.addtime?string('yyyy-MM-dd')}"]);
    </#list>


    $('#sales-charts,#sales-charts2,#sales-charts3,#sales-charts4').css({'width': '100%', 'height': '220px'});
    $.plot("#sales-charts", [
        {label: "血压（收缩压）", data: xyss},
        {label: "血压（舒张压）", data: xysz},
        {label: "心率", data: xl}
    ], {
        hoverable: true,
        shadowSize: 0,
        series: {
            lines: {show: true},
            points: {show: true}
        },
        xaxis: {
            ticks:arr
        },
        grid: {
            backgroundColor: {colors: ["#fff", "#fff"]},
            borderWidth: 1,
            borderColor: '#555'
        }
    });

    $.plot("#sales-charts2", [
        {label: "血糖", data: xt}
    ], {
        hoverable: true,
        shadowSize: 0,
        series: {
            lines: {show: true},
            points: {show: true}
        }, xaxis: {
            ticks:arr
        },
        grid: {
            backgroundColor: {colors: ["#fff", "#fff"]},
            borderWidth: 1,
            borderColor: '#555'
        }
    });

    $.plot("#sales-charts3", [
        {label: "BMI", data: bmi}
    ], {
        hoverable: true,
        shadowSize: 0,
        series: {
            lines: {show: true},
            points: {show: true}
        }, xaxis: {
            ticks:arr
        },
        grid: {
            backgroundColor: {colors: ["#fff", "#fff"]},
            borderWidth: 1,
            borderColor: '#555'
        }
    });


    $.plot("#sales-charts4", [
        {label: "左眼视力", data: slz},
        {label: "右眼视力", data: sly}
    ], {
        hoverable: true,
        shadowSize: 0,
        series: {
            lines: {show: true},
            points: {show: true}
        }, xaxis: {
            ticks:arr
        },
        grid: {
            backgroundColor: {colors: ["#fff", "#fff"]},
            borderWidth: 1,
            borderColor: '#555'
        }
    });



</script>
</html>

